<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr><th>商品标题</th><th>价格</th><th>库存</th></tr>
</table>
<script>
  // Person.java
  // Person p = new Person();

  //实例化一个空对象
  let p1 = {};
  //JS语言支持给对象动态添加属性和方法
  p1.name = "张三";
  p1.age = 18;
  p1.run = function () {
    console.log(this.name+":"+this.age);
  }
  //调用对象的方法
  p1.run();

  //实例化自带属性和方法的对象
  let p2 = {
    name:"李四",
    age:18,
    run:function () {
      console.log(this.name+":"+this.age);
    }
  }
  p2.gender="男"; //仍可以动态添加属性和方法
  p2.run();
  //通过对象封装数据
  let productArr = [{title:"苹果手机",price:5000,num:100},
    {title:"遥遥领先",price:8000,num:0},
    {title:"小米手机",price:6000,num:200}];
  let table = document.querySelector("table");
  //遍历数组
  for (let p of productArr) {
    //创建tr和三个td
    let tr = document.createElement("tr");
    let titleTd = document.createElement("td");
    let priceTd = document.createElement("td");
    let numTd = document.createElement("td");
    //把遍历的商品对象里面的数据取出 赋值给每一个td
    titleTd.innerText = p.title;
    priceTd.innerText = p.price;
    numTd.innerHTML = p.num;
    //把td装进tr
    tr.append(titleTd,priceTd,numTd);
    //把tr装进table
    table.append(tr);
  }
  








</script>
</body>
</html>